<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>图表统计</title>
    <link rel="stylesheet" href="../assets/lib/bootstrap.css" />
    <link rel="stylesheet" href="../assets/lib/main.css" />
    <script src="../assets/lib/jquery.js"></script>
    <script type="text/javascript" src="../assets/lib/echarts.min.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel">
                    <em>10015</em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em>123</em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em>35</em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em>123</em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <div class="gragh_pannel" id="curve_show"></div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="gragh_pannel" id="pie_show"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel" id="column_show"></div>
    </div>

    <script>
        var oChart = echarts.init(document.getElementById("curve_show"));
        var aList_all = [{
            count: 36,
            date: "2019-04-13"
        }, {
            count: 52,
            date: "2019-04-14"
        }, {
            count: 78,
            date: "2019-04-15"
        }, {
            count: 85,
            date: "2019-04-16"
        }, {
            count: 65,
            date: "2019-04-17"
        }, {
            count: 72,
            date: "2019-04-18"
        }, {
            count: 88,
            date: "2019-04-19"
        }, {
            count: 64,
            date: "2019-04-20"
        }, {
            count: 72,
            date: "2019-04-21"
        }, {
            count: 90,
            date: "2019-04-22"
        }, {
            count: 96,
            date: "2019-04-23"
        }, {
            count: 100,
            date: "2019-04-24"
        }, {
            count: 102,
            date: "2019-04-25"
        }, {
            count: 110,
            date: "2019-04-26"
        }, {
            count: 123,
            date: "2019-04-27"
        }, {
            count: 100,
            date: "2019-04-28"
        }, {
            count: 132,
            date: "2019-04-29"
        }, {
            count: 146,
            date: "2019-04-30"
        }, {
            count: 200,
            date: "2019-05-01"
        }, {
            count: 180,
            date: "2019-05-02"
        }, {
            count: 163,
            date: "2019-05-03"
        }, {
            count: 110,
            date: "2019-05-04"
        }, {
            count: 80,
            date: "2019-05-05"
        }, {
            count: 82,
            date: "2019-05-06"
        }, {
            count: 70,
            date: "2019-05-07"
        }, {
            count: 65,
            date: "2019-05-08"
        }, {
            count: 54,
            date: "2019-05-09"
        }, {
            count: 40,
            date: "2019-05-10"
        }, {
            count: 45,
            date: "2019-05-11"
        }, {
            count: 38,
            date: "2019-05-12"
        }, ];

        let aCount = [];
        let aDate = [];

        for (var i = 0; i < aList_all.length; i++) {
            aCount.push(aList_all[i].count);
            aDate.push(aList_all[i].date);
        }

        var chartopt = {
            title: {
                text: "月新增文章数",
                left: "center",
                top: "10",
            },
            tooltip: {
                trigger: "axis",
            },
            legend: {
                data: ["新增文章"],
                top: "40",
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ["line", "bar"]
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    },
                },
            },
            calculable: true,
            xAxis: [{
                name: "日",
                type: "category",
                boundaryGap: false,
                data: aDate,
            }, ],
            yAxis: [{
                name: "月新增文章数",
                type: "value",
            }, ],
            series: [{
                name: "新增文章",
                type: "line",
                smooth: true,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: "default"
                        },
                        color: "#f80"
                    },
                    lineStyle: {
                        color: "#f80"
                    },
                },
                data: aCount,
            }, ],
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(255,136,0,0.39)",
                    }, {
                        offset: 0.34,
                        color: "rgba(255,180,0,0.25)",
                    }, {
                        offset: 1,
                        color: "rgba(255,222,0,0.00)",
                    }, ]),
                },
            },
            grid: {
                show: true,
                x: 50,
                x2: 50,
                y: 80,
                height: 220,
            },
        };

        oChart.setOption(chartopt);

        var oPie = echarts.init(document.getElementById("pie_show"));
        var oPieopt = {
            title: {
                top: 10,
                text: "分类文章数量比",
                x: "center",
            },
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            color: ["#5885e8", "#13cfd5", "#00ce68", "#ff9565"],
            legend: {
                x: "center",
                top: 65,
                data: ["奇趣事", "会生活", "爱旅行", "趣美味"],
            },
            toolbox: {
                show: true,
                x: "center",
                top: 35,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ["pie", "funnel"],
                        option: {
                            funnel: {
                                x: "25%",
                                width: "50%",
                                funnelAlign: "left",
                                max: 1548,
                            },
                        },
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    },
                },
            },
            calculable: true,
            series: [{
                name: "访问来源",
                type: "pie",
                radius: ["45%", "60%"],
                center: ["50%", "65%"],
                data: [{
                    value: 300,
                    name: "奇趣事"
                }, {
                    value: 100,
                    name: "会生活"
                }, {
                    value: 260,
                    name: "爱旅行"
                }, {
                    value: 180,
                    name: "趣美味"
                }, ],
            }, ],
        };
        oPie.setOption(oPieopt);

        var oColumn = this.echarts.init(document.getElementById("column_show"));
        var oColumnopt = {
            title: {
                text: "文章访问量",
                left: "center",
                top: "10",
            },
            tooltip: {
                trigger: "axis",
            },
            legend: {
                data: ["奇趣事", "会生活", "爱旅行", "趣美味"],
                top: "40",
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ["line", "bar"]
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    },
                },
            },
            calculable: true,
            xAxis: [{
                type: "category",
                data: ["1月", "2月", "3月", "4月", "5月"],
            }, ],
            yAxis: [{
                name: "访问量",
                type: "value",
            }, ],
            series: [{
                name: "奇趣事",
                type: "bar",
                barWidth: 20,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: "default"
                        },
                        color: "#fd956a"
                    },
                },
                data: [800, 708, 920, 1090, 1200],
            }, {
                name: "会生活",
                type: "bar",
                barWidth: 20,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: "default"
                        },
                        color: "#2bb6db"
                    },
                },
                data: [400, 468, 520, 690, 800],
            }, {
                name: "爱旅行",
                type: "bar",
                barWidth: 20,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: "default"
                        },
                        color: "#13cfd5"
                    },
                },
                data: [500, 668, 520, 790, 900],
            }, {
                name: "趣美味",
                type: "bar",
                barWidth: 20,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: "default"
                        },
                        color: "#00ce68"
                    },
                },
                data: [600, 508, 720, 890, 1000],
            }, ],
            grid: {
                show: true,
                x: 50,
                x2: 30,
                y: 80,
                height: 260,
            },
            dataZoom: [
                //给x轴设置滚动条
                {
                    start: 0, //默认为0
                    end: 100 - 1000 / 31, //默认为100
                    type: "slider",
                    show: true,
                    xAxisIndex: [0],
                    handleSize: 0, //滑动条的 左右2个滑动条的大小
                    height: 8, //组件高度
                    left: 45, //左边的距离
                    right: 50, //右边的距离
                    bottom: 26, //右边的距离
                    handleColor: "#ddd", //h滑动图标的颜色
                    handleStyle: {
                        borderColor: "#cacaca",
                        borderWidth: "1",
                        shadowBlur: 2,
                        background: "#ddd",
                        shadowColor: "#ddd",
                    },
                },
            ],
        };
        oColumn.setOption(oColumnopt);
    </script>
</body>

</html>